<template>
	<view class="">
		<view class="comments_input flex">
			<image :src="headImg" mode=""></image>
			<view class="input" @click="openPopup">
				<input type="text" placeholder-class="place" disabled="true" placeholder-style="font-size:24upx" placeholder="我也来说两句" />
				<i class="icon">&#xe60a;</i>
			</view>
		</view>
		<view class="comments" v-if="list.length">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="list_info flexo">
					<image :src="item.user_info.Avatar" mode=""></image>
					<view class="list_r">
						<view class="top flex">
							<span>{{ item.user_info.MemberName }}</span>
							<span>{{ item.create_time_t }}</span>
						</view>
						<view class="star"><uni-rate @change="change" size="14" disabled="true" :value="item.level" active-color="#df0305"></uni-rate></view>
					</view>
				</view>
				<view class="contant">{{ item.content }}</view>
				<view class="reply" v-if="item.child.length" v-for="(items,key) in item.child" :key="key">
					<text class="reply_one">{{ runname }}：</text>
					<text>{{ items.content }}</text>
					<view class="reply_jt"></view>
				</view>
			</view>
		</view>
		<!-- 没有评论 -->
		<view class="nocomments" v-else>
			<view class="load" v-if="loadflag">加载中</view>
			<view class="" v-else>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<span>暂无评论</span>
			</view>
		</view>
		<!-- 查看更多 -->
		<view class="more" @click="todiscuss" v-if="total >3">
			查看更多
			<i class="icon">&#xe637;</i>
		</view>
		<uni-popupt ref="popup" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="card">
				<textarea fixed="true," placeholder="我也来说两句" @focus="writecontent" @blur="nowrite" v-model="content" placeholder-style="color:#c1c1c1;font-size:22upx" />
				<!-- 	<input type="text" 
				adjust-position="true",
				placeholder="我也来说两句"
				@focus="writecontent"
				placeholder-style="color:#c1c1c1;font-size:22upx"value="" 
				/> -->
				<view class="bot">
					<view class="bot_l">
						<i class="icon">&#xe83d;</i>评分
						<uni-rate @change="change" size="18" active-color="#df0305"></uni-rate>
					</view>
					<span @tap="issue">发送</span>
				</view>
			</view>
		</uni-popupt>
		<navigation></navigation>
	</view>
</template>

<script>
import uniRate from '@/components/uni-rate/uni-rate.vue';
import uniPopupt from '@/components/uni-popupt/uni-popup.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { uniRate, uniPopupt ,navigation},
	props: ['commentId','runname', 'headImg'],
	data() {
		return {
			loadflag: true,
			popup_type: 'bottom',
			flag: false,
			page: '1',
			level: '',
			content: '',
			// commentlist: [],
			total:'',
			list: []
		};
	},
	mounted() {
		this.getcommentList();
	},
	methods: {
	
		// 获取评论列表
		getcommentList() {
			this.ajax('active/activeEval', {
				data: {
					active_id: this.commentId,
					page: this.page
				},
				success: res => {
					var comment = res.msg.data;
					comment = comment.forEach(e => {
						e.user_info.Avatar = e.user_info.Avatar.replace("http:","https:")
						e.create_time_t = e.create_time.split(' ')[0];
						e.update_time = e.update_time.split(' ')[0];
					});
					this.list = res.msg.data.splice(0, 3);
					 // console.log (this.list)
					// 判断有多少个评论
					this.total = res.msg.total
					this.loadflag = false;
				}
			});
		},
		// 发布评价
		issue() {
			if(!this.content) {
				this.toast('请输入评价内容')
				return false
			}
			this.ajax('active/addActiveEval', {
				data: {
					active_id: this.commentId,
					level: this.level,
					content: this.content
				},
				success: res => {
					 // console.log (res);
					if (!res.code) {
						this.toast(res.msg);
					} else {
						this.toast(res.msg);
						this.level = '';
						this.content = '';
						this.$refs.popup.close();
						this.getcommentList()
					}
				}
			});
		},
		writecontent() {
			this.popup_type = 'top';
		},
		nowrite() {
			this.popup_type = 'bottom';
		},
		// 打开评论弹出层
		openPopup() {
			this.$refs.popup.open();
		},
		change(e) {
			// 点击星星之后  传递过来的数据
			//  // console.log (e)
			this.level = e.value;
		},
		todiscuss() {
			this.$emit('todiscuss');
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageA/competiondetail/comment.less');
</style>
